<template>
  <view class="work-container">
    <view class="map-body">
      <view :key="item.id" v-for="item in titleLists" @click="clickItems(item.id)"
        :class="{ 'tag-view': true, active: item.checked }">
        {{ item.text }}
      </view>
    </view>
    <view v-if="curTagIndex === 1">
      <!-- 地图 -->
      <view class="map">
        <map-com v-if="mapFlag" ref="mapRefs" :itemData="mapDatas" @isDisStatus="handleDistance"
          @markerTap="markerTap"></map-com>
      </view>
    </view>
    <view v-if="curTagIndex === 2" class="tab-item">
      <view>
        <image :src="upPlaceIcon" style="width: 200px;height: 110px;" />
        <view>正在建设中，敬请期待...</view>
      </view>
    </view>
    <uni-popup type="bottom" background-color="#fff" ref="customColumnsRef" :is-mask-click="false">
      <view class="header-wrap">
        <view>
          <text>{{collieryName}}</text>
          <uni-icons class="close-icon" size="20" :color="'#CCCCCC'" type="closeempty" @click="closePop"></uni-icons>
        </view>
      </view>
      <scroll-view scroll-y="true">
        <view v-if="coalInfoList.length" class="content-wrap">
          <view v-for="item in coalInfoList">
            {{item}}
          </view>
        </view>
        <view v-else class="noData-wrap">
          <img :src="upPlaceIcon" style="width: 200px;height: 110px;">
          <view>暂无数据</view>
        </view>
      </scroll-view>
    </uni-popup>
  </view>
</template>

<script>
  import config from '@/config';
  import { getCollieryMap } from '@/api/colliery.js';
  import { getMenuAuth, getButtonAuth } from '@/utils/permission';
  export default {
    data() {
      return {
        mapFlag: false,
        isLogin: false,
        mapDatas: [],
        titleLists: [
          {
            id: 1,
            text: '地图',
            checked: true
          },
          {
            id: 2,
            text: '工具',
            checked: false
          }
        ],
        collieryName: '',
        coalInfoList: [],
        curTagIndex: 1,
        mapFlag: false,
        authriotyFlag: true,
        authriotyFlagchgindex: true
      };
    },
    computed: {
      upPlaceIcon() {
        return config.baseImgUrl + '/up-place.png';
      },
      noauthImg() {
        return config.baseImgUrl + '/no-auth.png';
      }
    },
    onShow() {
      this.curTagIndex = 1;
      this.getMenuAuth();
    },
    methods: {
      //获取煤源地图数据
      async getLists() {
        try {
          let res = await getCollieryMap();
          if (res.code == 0) {
            this.mapDatas = res.data || [];
            this.mapFlag = true;
          }
        } catch (e) {
          return false;
        }
      },
      clickItems(id) {
        this.titleLists.forEach((item) => {
          item.checked = false;
          if (item.id == id) {
            this.curTagIndex = id;
            item.checked = true;
          }
        });
        if (this.curTagIndex == 1) {
          this.getLists();
        }
      },

      markerTap(title) {
        const data = this.mapDatas.find(e => e.collieryName === title)
        this.collieryName = data.collieryName
        this.coalInfoList = data.coalNames || []
        this.$refs.customColumnsRef.open('bottom')
      },
      closePop() {
        this.$refs.mapRefs?.clearMarkerActive()
        this.$refs.customColumnsRef.close()
      },
      handleDistance(res) {
        console.log('用户已经同意隐私协议', res);
      },
      async getMenuAuth() {
        const auth = await getMenuAuth('tools');
        if (auth) {
          this.authriotyFlag = true;
          this.getButtonAuth();
        } else {
          this.authriotyFlag = false;
        }
      },
      async getButtonAuth() {
        const authMarksMap = { 'govern:map:query': 'authriotyFlagchgindex' };
        const buttonAuths = await getButtonAuth(Object.keys(authMarksMap));
        buttonAuths.forEach((key) => {
          if (key === 'govern:map:query') {
            this.clickItems(1);
          }
          this[authMarksMap[key]] = true;
        });
      },
      clickItem(id) {
        this.titleLists.forEach((item) => {
          item.checked = false;
          if (item.id == id) {
            this.curTagIndex = id;
            item.checked = true;
          }
        });
      }
    },
  };
</script>

<style lang="scss" scoped>
  .work-container {
    font-size: 14px;

    .map {
      width: 100%;
      height: 100%;
    }
  }

  .header-wrap {
    position: relative;
    padding: 12px 12px 0 12px;

    text {
      font-size: 18px;
      font-weight: bold;
    }

    .sub-title {
      color: #333333;
    }

    .close-icon {
      position: absolute;
      right: 15px;
    }
  }

  .content-wrap {
    gap: 6px;
    display: grid;
    padding: 15px;
    overflow-y: auto;
    max-height: 400px;
    grid-template-columns: 1fr 1fr 1fr;

    >view {
      padding: 4px;
      border-radius: 2px;
      background: #f1f2f5;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .noData-wrap {
    padding: 50px 12px 0 12px;
    text-align: center;

    >view {
      text-align: center;
    }
  }

  .tab-item {
    display: flex;
    justify-content: center;
    margin-top: 35%;

    >view {
      display: flex;
      flex-direction: column;
      align-items: center;

      >view {
        margin-top: 20px;
      }
    }
  }
</style>